﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表单页面</title>
    <link href="style/lib.css" rel="stylesheet" />
    <script src="/script/list-config.js"></script>
    <script src="/script/list.js"></script>
    <script src="/script/date/moment.js"></script>
    <script src="/script/art/template-web.js"></script>
    <script src="/script/art/template-web-ex.js"></script>
</head>

<body>
    <div class="view-page">
        <!--搜索区域-->
        <div class="view-search inline">
            <div class="form-inline">
                <div class="form-group">
                    <label>账号</label>
                    <input type="text" class="form-control" data-form="PhoneNumber" placeholder="登录账号">
                </div>
                <div class="form-group" data-search="date">
                    <div class="input-group width-320px">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" data-form="CreateTimeString" readonly data-drp='{"t":2,"p":{"opens":"right"}}' placeholder="创建时间">
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" id="btn-search" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
                </div>
            </div>
        </div>
        <div class="view-eidt-btns">
            <a href="javascript:;" class="btn btn-sm" data-btn-add="form.html"><i class="fa fa-plus"></i>添加</a>
            <a href="javascript:;" class="btn btn-sm" data-btn-eidt="form.html"><i class="fa fa-edit"></i>编辑</a>
            <a href="javascript:;" class="btn btn-danger btn-sm" id="btn-delete-all"><i class="fa fa-trash-o"></i>删除</a>
        </div>
        <div class="view-data">
            <table id="table" class="table table-bordered table-hover" data-post="">
                <thead>
                    <tr>
                        <th class="checkboxs">
                            <label class="checkbox-reset">
                                <input type="checkbox" data-checked-table="all" />
                            </label>
                        </th>
                        <th>用户手机号/登录号码</th>
                        <th>密码</th>
                        <th>密码盐值</th>
                        <th></th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <!--分页条 默认选择id=list-page元素-->
            <div id="list-page" class="view-pagination-page"></div>
        </div>
    </div>
</body>


</html>
<!--双时间组件 如果不用就不需要引用-->
<link href="/script/drp/drp.css" rel="stylesheet" />
<script src="/script/drp/drp.js"></script>
<script src="/script/drp/drp-inti.js"></script>

<!--定义js模板-->
<!--语法网址 https://aui.github.io/art-template/zh-cn/docs/index.html-->
<script type="text/html" id="tp-table">
    {{each list d}}
    <tr data-eidt="{{d.Id}}">
        <td class="checkboxs">
            <label class="checkbox-reset">
                <input type="checkbox" value="{{d.Id}}" data-checked-table="single" />
            </label>
        </td>
        <td>{{d.PhoneNumber}}</td>
        <td>{{d.Password}}</td>
        <td><label class="label label-danger">启用</label></td>
        <td>{{d.PasswordSalt}}</td>
        <td>{{d.CreateTime|to_date}}</td>
        <td>{{d.UpdateTime|to_date}}</td>
    </tr>
    {{/each}}
</script>

<script type="text/javascript">
    $(function() {
        function _LoadData() {
            var parm = $(".view-search").getFormData();
            $("#table").ajaxPageTable(1, "", parm, function(d) {
                //  $("#table>tbody").append(template("tp-table", { list: d }));
            })
        }
        //  _LoadData();
        //搜索按钮
        $("#btn-search").click(function() {
            _Load();
        })

        // $.http.json("", {}, function() {});
    })
</script>
